<template>
    <div id="login">
      <div class="login-bg"><img src="../../static/img/login_bg@3x.png"/></div>
      <div class="user">
        <img src="../../static/img/icon_zfb@3x.png"/>
        <div class="help-input">
          <img src="../../static/img/icon_sj@3x.png"/>
          <input type="number" placeholder="请输入手机号" v-model="phone">
        </div>
        <div class="help-input">
          <img src="../../static/img/icon_mm@3x.png"/>
          <input type="password" placeholder="请输入密码" v-model="password">
        </div>
        <div class="help-input">
          <img src="../../static/img/icon_yzm@3x.png"/>
          <input type="text" placeholder="请输入验证码" v-model="inputCode">
          <span @click="getCode">获取验证码</span>
        </div>
      </div>
      <div class="sub" @click="login">登录</div>
      <div class="dsf">
        <span>第三方登录</span>
        <div>
          <img src="../../static/img/icon_wx@3x.png" />
          <img src="../../static/img/icon_zfb@3x.png" />
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "login",
      data(){
          return{
            phone:'18833234045',
            password:'',
            code:'',
            inputCode:'',
          }
      },
      methods:{
          getCode(){
            var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
            if(this.phone==''){
              this.$toast('请输入手机号');
              return false;
            }else if(!reg.test(this.phone)){
              this.$toast('手机格式不正确');
              return false;
            }
            var params = new URLSearchParams();
            params.append('phone', this.phone);       //你要传给后台的参数值 key/value
            this.$POST('/login/sendMsg',params,false).then(res =>{
              if(res.meta.code===200 && res.meta.msg==='OK'){
                this.code=res.data;
              }
            }).catch(res=>{
              console.log(res);
            })
          },
          login(){
            var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
            if(this.phone==''){
              this.$toast('请输入手机号');
              return false;
            }else if(!reg.test(this.phone)){
              this.$toast('手机格式不正确');
              return false;
            }else if(this.password=="") {
              this.$toast('请输入密码');
              return false;
            }else if(this.inputCode==""){
              this.$toast('请输入验证码');
            }else if(this.inputCode!==this.code){
              this.$toast('验证码不正确');
            }

            var params = new URLSearchParams();
            params.append('phone', this.phone);       //你要传给后台的参数值 key/value
            params.append('password', this.password);       //你要传给后台的参数值 key/value
            this.$POST('/login/userlogin',params,true).then(res =>{
              if(res.meta.code===200 && res.meta.msg==='OK'){
                this.code=res.data;
              }
            }).catch(res=>{
              console.log(res);
            })

          }
      }
    }
</script>

<style scoped>
 .login-bg{
   width: 100%;
 }
 .login-bg>img{
   display: block;
   width: 100%;
 }
  .user{
    width: 80%;
    margin: 0 auto;
    position: relative;
    top: -50px;
  }
 .user>img{
   width:90px;
   height:90px;
   border-radius:90px;
   margin: 0 auto;
   margin-bottom: 15px;
 }
 .help-input{
   text-align: left;
   border-bottom: 1px solid #bfbfbf;
   padding-bottom: 10px;
   margin-bottom:25px;
 }
  .help-input>img{
    display: inline-block;
    width: 20px;
    position: relative;
    top:8px;
    margin-left: 5px;
  }
 .help-input>input{
   width:60%;
   border: 0;
   font-size: 18px;
   margin-left: 5px;
 }
  .sub{
    width: 80%;
    margin: 0 auto;
    border-radius: 30px;
    background: linear-gradient(to right, #fe5741 , #fd6c46,#fc7f4a);
    height: 45px;
    line-height: 45px;
    color: #ffffff;
    font-size: 18px;
    margin-top: -15px;
  }
  .dsf{
    width: 80%;
    margin: 0 auto;
    border-top: 1px solid #bfbfbf;
    margin-top: 50px;
  }
 .dsf>span{
   color: #959595;
   position: relative;
   top: -12px;
   display: block;
   background: #ffffff;
   width:100px;
   margin: 0 auto;
 }
 .dsf img{
   display: inline-block;
   width:55px;
   height:55px;
   border-radius:55px;
 }
 .dsf>div{
   width:40%;
   margin: 0 auto;
 }
 .dsf>div>img:first-child{
   float: left;
 }
 .dsf>div>img:last-child{
   float: right;
 }
 .help-input>span{
   float: right;
   line-height: 50px;
   color: #fe513f;
 }
</style>
<style>
  .help-input{
    text-align: left;
    border-bottom: 1px solid #bfbfbf;
    padding-bottom: 10px;
    margin-bottom:25px;
  }
  .help-input>img{
    display: inline-block;
    width: 20px;
    position: relative;
    top:8px;
    margin-left: 5px;
  }
  .help-input>input{
    width:60%;
    border: 0;
    font-size: 18px;
    margin-left: 5px;
  }
  .sub{
    width: 80%;
    margin: 0 auto;
    border-radius: 30px;
    background: linear-gradient(to right, #fe5741 , #fd6c46,#fc7f4a);
    height: 45px;
    line-height: 45px;
    color: #ffffff;
    font-size: 18px;
    margin-top: -15px;
  }
</style>
